<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="css/sdmenu.css"/>
		<script type="text/javascript" src="js/tools.js">
			
		</script>
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
				list-style:none;
			}
			a,img {
				border: 0;
				text-decoration: none;
			}
			
			body {
				font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
			}
		</style>
		
		<script>
			window.onload = function(){
				/*
				 * 我们的每一个菜单都是一个div
				 * 当div具有collapsed这个类时，div就是折叠的状态
				 * 当没有这个类时，div就是展开的状态
				 */
				
				//点击菜单，切换菜单的显示状态
				
				//获取所有类名为menuSpan的元素
				var menuSpan = document.querySelectorAll(".menuSpan");
				
				//定义一个变量，用来保存当前打开的菜单
				var openDiv = menuSpan[0].parentNode;
				//为所有的span绑定单机响应函数
				for(var i=0; i<menuSpan.length;i++){
					menuSpan[i].onclick = function(){
						//this代表我当前点击的span
						//获取当前span的父元素
						//alert("hello");
						var parentDiv = this.parentNode;
						
						toggleMenu(parentDiv);
						
						//判断openDiv和parentDiv是否是同一个
						if(openDiv != parentDiv && !hasClass(openDiv , "collapsed")){
							//打开菜单以后，应该关闭之前打开的菜单
							//addClass(openDiv , "collapsed");
							//为了同意过渡效果，我们希望在这里将addClass改为toggleClass
							//toggleClass(openDiv , "collapsed");
							toggleMenu(openDiv, "collapsed");
							
							}
							//修改openDiv为当前打开的菜单
							openDiv = parentDiv;
						}
					};
					
					
					function toggleMenu(obj){
						//获取begin的值
						var begin = obj.offsetHeight;
						
						toggleClass(obj , "collapsed");
						
						//获取end的值
						var end = obj.offsetHeight;
						
						//console.log("begin = " + begin + ",end = " + end);
						//将元素的高度重新设置为begin
						obj.style.height = begin  + "px";
						
						//执行动画
						move(obj , "height" , end , 10 , function(){
							obj.style.height = "";
						});
					}
					
				
			};
		</script>
	</head>
	<body>
		<div id="my_menu" class="sdmenu">
			<div>
				<span class="menuSpan">在线工具</span>
				<a href="#">图像优化</a>
				<a href="#">收藏夹图标生成器</a>
				<a href="#">邮件</a>
				<a href="#">htaccess密码</a>
				<a href="#">梯度图像</a>
				<a href="#">按钮生成器</a>
			</div>

			<div class="collapsed">
				<span class="menuSpan">支持我们</span>
				<a href="#">推荐我们</a>
				<a href="#">链接我们</a>
				<a href="#">网络资源</a>
			</div>

			<div class="collapsed">
				<span class="menuSpan">合作伙伴</span>
				<a href="#">JavaScript工具包</a>
				<a href="#">CSS驱动</a>
				<a href="#">CodingForums</a>
				<a href="#">CSS例子</a>
			</div>

			<div class="collapsed">
				<span class="menuSpan">测试电流</span>
				<a href="#">Current or not</a>
				<a href="#">Current or not</a>
				<a href="#">Current or not</a>
				<a href="#">Current or not</a>
			</div>
		</div>
	</body>
</html>
